<template>
  <div class="layeredPanel">
    <template v-if="groupArrangement.length>0">
      <div class="scrollBox" :style="{minWidth:widthScroll()}">
        <el-table style="width: 100%" :header-cell-style="{background:'#f2f8ff'}" empty-text="未知">
          <el-table-column
            align="center"
            :width="_in==enter.byFields.length-1?lastWidth:widthGroup"
            v-for="(_i,_in) in  enter.byFields"
            :key="_i.id"
            :label="_i.propertyName"
            :prop="_i.id"
          >
            <template slot="header">
              <groupChoose
                @change="groupChange($event,_in)"
                :name="_i.propertyName"
                :optionsArr="arrGroupOptions[_in].options"
                :checkedArr="arrGroupOptions[_in].checked"
              ></groupChoose>
            </template>
            
          </el-table-column>

          <el-table-column
            align="center"
            :min-width="widthIndex"
            v-for="(_i,_in) in  enter.messures"
            :key="_i.eventId"
            :prop="_i.eventId"
          >
            <template slot="header">
              <span class="table_head">
                <span class="icon">{{convert(_in+1)}}</span>
                {{_i.name}}
              </span>
            </template>
          </el-table-column>
        </el-table>
        <treeTable
          :key="updateBool"
          :widthGroup="widthGroup"
          :widthIndex="widthIndex"
          :groupArrangement="groupArrangement"
          :lastWidth="lastWidth"
        ></treeTable>
      </div>
    </template>
  </div>
</template>
<script>
import treeTable from "./treeTable.vue";
import groupChoose from "./groupChoose.vue"; // 引入分组筛选选择组件
export default {
  name: "layeredPanel",
  props: {
    enter: {
      type: Object,
      default: () => {
        return {};
      }
    },
    lastWidth: {
      type: Number,
      default: () => {
        return 260;
      }
    },
    out: {
      type: Object,
      default: () => {
        return {};
      }
    },
    currentPage: {
      type: Number,
      default: () => {
        return 1;
      }
    },
    pageSize: {
      type: Number,
      default: () => {
        return 5;
      }
    },
    dateScreen: {
      type: Object,
      default: () => {
        return null;
      }
    },
    widthGroup: {
      type: Number,
      default: () => {
        return 200;
      }
    },
    widthIndex: {
      type: Number,
      default: () => {
        return 200;
      }
    }
  },
  components: { treeTable,groupChoose },
  data() {
    return {
      updateBool:0,
      arrGroupOptions: [], // 分组可选值数组
      groupArrangement: [] // 转义后的具有层次的数据结构
    };
  },
  watch: {},
  methods: {
    groupChange(arr, index) {
      // console.log(this.arrGroupOptions,arr,index)
      this.arrGroupOptions[index].checked = JSON.parse(JSON.stringify(arr));
      this.getArrangement(this.arrGroupOptions);
      this.updateBool++;
    },
    convert(num) {
      return num <= 26
        ? String.fromCharCode(num + 64)
        : this.convert(~~((num - 1) / 26)) + this.convert(num % 26 || 26);
    },
    // 数据过滤函数  根据 日期  空数据 进行数据筛选
    dataFilter(arr, str = "") {
      let len = arr.length - 1;

      for (let i = 0; i <= len; i++) {
        let _str = str + arr[i].value;

        let bool = false;
        
        // let pageArr = this.pageHandle(this.out[0].rollUpResult.rows,this.currentPage,this.pageSize);
        this.out[0].rollUpResult.rows.map(_i => {
          if (_i.byValues.join("").indexOf(_str) != -1) {
            bool = true;
          }
        });

        if (!bool) {
          arr.splice(i, 1);
          len--;
          i--;
          continue;
        } else {
          arr[i].children = this.dataFilter(arr[i].children, _str);
        }
      }
      return arr;
    },
    widthScroll() {
      let num = 0;

      for (let i = 0; i <= this.enter.byFields.length - 2; i++) {
        num += Number(this.widthGroup);
      }

      num += this.lastWidth;

      for (let i = 0; i <= this.enter.messures.length - 1; i++) {
        num += Number(this.widthIndex);
      }

      return num + "px";
    },
    zeroDel(time) {
      let date = new Date(time);
      let year = date.getFullYear();
      let mon = date.getMonth() + 1;
      let day = date.getDate();
      mon = mon < 10 ? "0" + mon : mon;
      day = day < 10 ? "0" + day : day;
      return year + "-" + mon + "-" + day;
    },
    // 获取分组可选值函数
    getArrGroup(enter, out) {
      let _arr = JSON.parse(JSON.stringify(enter.byFields));
      _arr.map(_i => {
        _i.options = [];
      });
      out.map(item => {
        item.detailResult.rows.map(itemRow => {
          itemRow.byValues.map((itemByv, indexByv) => {
            if(_arr[indexByv]){
               _arr[indexByv].options.push(itemByv); 
            }
          });
        });
      });
      _arr.map(item => {
        item.options = Array.from(new Set(item.options));
        item.checked = Array.from(new Set(item.options));
      });
      return _arr;
    },
    // 分页函数
    pageHandle(arr, currentPage, pageSize) {
      let _arr = [];
      currentPage = Number(currentPage);
      pageSize = Number(pageSize);
      for (
        let i = (currentPage - 1) * pageSize;
        i <= (currentPage - 1) * pageSize + pageSize - 1;
        i++
      ) {
        if (arr[i]) {
          _arr.push(JSON.parse(JSON.stringify(arr[i])));
        }
      }

      return _arr;
    },
    // 根据分组可选值，生成具有层次的对象结构
    getArrangement(arr) {
      let copy = [];
      let len = arr.length;

      let that = this;

      // 结构转义函数
      function childrenAdd(arr, chlArr, index) {
        let _arr = JSON.parse(JSON.stringify(arr));
        if (_arr.length == 0) {
          chlArr.map(_i => {
            let obj = {
              value: _i,
              children: []
            };
            if (index == len - 1) {
              obj.bool = true;
            }
            _arr.push(obj);
          });
        } else {
          _arr.map(_i => {
            _i.children = childrenAdd(_i.children, chlArr, index);
          });
        }
        return _arr;
      }

      // 表格数据补全函数
      function dataAdd(arr, group = []) {
        let _arr = JSON.parse(JSON.stringify(arr));
        let _group = JSON.parse(JSON.stringify(group));
        _arr.map(item => {
          if (!item.bool && item.children && item.children.length > 0) {
            item.children = dataAdd(item.children, [..._group, item.value]);
          } else {
            item.dataTable = {
              indexArrTotal: [], // 外侧指标总计数组
              indexArrDate: [] // 内侧指标，每天数据
            };
            let str = _group.join("") + item.value;
            // 外侧指标总计值 列追加
            that.enter.messures.map((itemMess, indexMess) => {
              let obj = {
                one: null,
                two: null
              };
              that.out.map((itemOut, indexOut) => {
                itemOut.rollUpResult.rows.map(itemRow => {
                  if (itemRow.byValues.join("") == str && indexOut == 0) {
                    obj.one = itemRow.values[0][indexMess];
                  }
                  if (itemRow.byValues.join("") == str && indexOut == 1) {
                    obj.two = itemRow.values[0][indexMess];
                  }
                });
              });
              item.dataTable.indexArrTotal.push(obj);
            });
            // 内侧折叠表格,数据追加  -- 时间维度
            that.out[0].detailResult.series.map((itemSer, indexSer) => {
              if (that.dateScreen && that.zeroDel(that.dateScreen) != itemSer) {
                return;
              }
              let numDate = {
                time: null,
                indexArr: []
              };
              // 时间列追加
              let time = {
                one: itemSer,
                two: null
              };
              if (that.out[1]) {
                time.two = that.out[1].detailResult.series[indexSer];
              }
              numDate.time = time;
              // 指标列追加
              that.enter.messures.map((itemMess, indexMess) => {
                let objMess = {
                  one: null,
                  two: null
                };
                that.out.map((itemOut, indexOut) => {
                  itemOut.detailResult.rows.map(itemRow => {
                    if (itemRow.byValues.join("") == str && indexOut == 0) {
                      objMess.one = itemRow.values[indexSer][indexMess];
                    }
                    if (itemRow.byValues.join("") == str && indexOut == 1) {
                      objMess.two = itemRow.values[indexSer][indexMess];
                    }
                  });
                });
                numDate.indexArr.push(objMess);
              });
              item.dataTable.indexArrDate.push(numDate);
            });
          }
        });

        return _arr;
      }

      for (let i = 0; i <= len - 1; i++) {
        copy = childrenAdd(copy, arr[i].checked, i);
      }
      copy = dataAdd(copy); // 根据传入日期，进行数据追加
      copy = that.dataFilter(copy); // 进行数据过滤，对空分组，进行剔除
      copy = that.pageHandle(copy,this.currentPage,this.pageSize);
      this.groupArrangement = copy;
    }
  },
  beforeCreate() {},
  created() {
    this.arrGroupOptions = this.getArrGroup(this.enter, this.out);
    this.getArrangement(this.arrGroupOptions);
  },
  beforeMount() {},
  mounted() {},
  computed: {}
};
</script>

<style scoped lang="scss">
.layeredPanel {
  border-left: 1px solid #e4e7ed;
  border-right: 1px solid #e4e7ed;
  border-bottom: 1px solid #e4e7ed;
  overflow-x: scroll;
  // overflow-x: hidden;
  overflow-y: hidden;
  .scrollBox {
    height: 100%;
  }
}
.table_head {
  .icon {
    background: #00bf8a;
    color: white;
    display: inline-block;
    text-align: center;
    line-height: 0.3rem;
    width: 0.3rem;
    cursor: pointer;
    height: 0.3rem;
    border-radius: 50%;
    margin: 0 0.1rem;
  }
}
</style>
